.TablePagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  width: 100%;
  grid-area: footer;
  padding: var(--base-size-8) var(--base-size-16);
  border: var(--borderWidth-thin) solid var(--borderColor-default);
  border-top-width: 0;
  border-end-start-radius: var(--borderRadius-medium);
  border-end-end-radius: var(--borderRadius-medium);
}

@media ((max-width: calc(768px - 0.02px))) {
  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
    display: none;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
    margin-inline-end: 0;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {
    margin-inline-start: 0;
  }
}

@media ((min-width: 768px)) {
  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
    display: none;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {
    margin-inline-end: 0;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {
    margin-inline-start: 0;
  }
}

@media ((min-width: 1400px)) {
  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
    display: none;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {
    margin-inline-end: 0;
  }

  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {
    margin-inline-start: 0;
  }
}

.TablePaginationRange {
  color: var(--fgColor-muted);
  font-size: var(--text-body-size-small);
  margin: 0;
}

.TablePaginationSteps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  color: var(--fgColor-default);
  font-size: var(--text-body-size-medium);
  margin: 0;
  padding: 0;
}

.TablePaginationStep:first-of-type {
  margin-right: var(--base-size-16);
}

.TablePaginationStep:last-of-type {
  margin-left: var(--base-size-16);
}

.TablePaginationAction {
  display: flex;
  align-items: center;
  color: var(--fgColor-muted);
  font-size: var(--text-body-size-medium);
  /* stylelint-disable-next-line primer/typography */
  line-height: calc(20 / 14);
  user-select: none;
  padding: var(--base-size-8);
  border-radius: var(--borderRadius-medium);
}

.TablePaginationAction[data-has-page] {
  color: var(--fgColor-accent);
}

.TablePaginationPage {
  min-width: 2rem;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-body-size-medium);
  /* stylelint-disable-next-line primer/typography */
  line-height: calc(20 / 14);
  user-select: none;
  border-radius: var(--borderRadius-medium);
  padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
}

.TablePaginationAction[data-has-page]:hover,
.TablePaginationAction[data-has-page]:focus,
.TablePaginationPage:hover,
.TablePaginationPage:focus {
  background-color: var(--control-transparent-bgColor-hover);
}

.TablePaginationPage[data-active='true'] {
  background-color: var(--bgColor-accent-emphasis);
  color: var(--fgColor-onEmphasis);
}

.TablePaginationPage[data-active='true']:focus-visible {
  outline: 2px solid var(--bgColor-accent-emphasis);
  outline-offset: -2px;
  /* stylelint-disable-next-line primer/box-shadow */
  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
}

.TablePaginationTruncationStep {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  user-select: none;
}
